var vm = new Vue({
    el: '#contentContainer',
    data: {
        tableData: [],
        pageNum: 1,
        pageSize: 20,
        pageSizes: [20, 30, 40, 50],
        total: 0,
        userName: '',
        roleId: '',
        multipleSelection: [],
        tableHeight: 400,
        treeData: [{roleId: 0, roleName: "角色"}],
        treeProps: {
            children: 'children',
            label: 'roleName'
        }
    },
    created: function () {
        var $this = this;

        Common.getJson('/sys/role/getAllRoleList', {},
            function (response) {
                if (!response || response.status != 200)
                    return;

                var root = $this.treeData[0];
                root.children = response.result;
                $this.treeData = [root];

                $this.loadData();
            });
    },
    mounted: function () {
        //动态计算table的高度
        var winHeight = $(window).height();
        var toolbarHeight = $('#toolbar').height() + 2 || 0;
        var paginationHeight = $('#pagination').height() || 0;
        var tableMargin = parseInt($('.dataTable').css('margin-top') || 0)
            + parseInt($('.dataTable').css('margin-bottom') || 0);
        var containerPadding = parseInt($('.contentContainer').css('padding-top') || 0)
            + parseInt($('.contentContainer').css('padding-bottom') || 0);

        this.tableHeight = winHeight - toolbarHeight - paginationHeight
            - tableMargin - containerPadding;

        var treeHeight = winHeight - toolbarHeight - tableMargin - containerPadding;
        $('.tree-layout').height(treeHeight);

        //改变树形控件滚动条样式
        $('.tree').slimscroll({
            height: $(".tree-layout").height(),
            opacity: 0
        });
    },
    methods: {
        loadData: function () {
            var $this = this;

            Common.getJson('/sys/user/getUserList',
                {
                    pageNum: $this.pageNum, pageSize: $this.pageSize,
                    userName: $this.userName, roleId: $this.roleId
                },
                function (response) {
                    if (!response || response.status != 200)
                        return;

                    var result = response.result;
                    $this.tableData = result.list;
                    $this.pageNum = result.pageNum;
                    $this.pageSize = result.pageSize;
                    $this.total = result.total;
                });
        },
        onSelectionChange: function (val) {
            this.multipleSelection = val;
        },
        onSizeChange: function (size) {
            this.pageNum = 1;
            this.pageSize = size;
            this.loadData();
        },
        onCurrentChange: function (currentPage) {
            if (this.pageNum === currentPage)
                return;

            this.pageNum = currentPage;
            this.loadData();
        },
        onSearch: function () {
            this.roleId=null;
            this.pageNum = 1;
            this.loadData();
        },
        onAdd: function () {
            window.location.href = '/sys/user/add';
        },
        onEdit: function () {
            if (this.multipleSelection.length == 0) {
                this.$message({
                    type: 'warning',
                    message: '请选择要编辑的数据'
                });

                return;
            }

            if (this.multipleSelection.length > 1) {
                this.$message({
                    type: 'warning',
                    message: '请只选择一条数据'
                });

                return;
            }

            var userId = this.multipleSelection[0].userId;
            window.location.href = '/sys/user/edit?userId=' + userId;
        },
        onReset: function () {
            if (this.multipleSelection.length == 0) {
                this.$message({
                    type: 'warning',
                    message: '请选择要重置密码的用户'
                });

                return;
            }

            if (this.multipleSelection.length > 1) {
                this.$message({
                    type: 'warning',
                    message: '请只选择一条数据'
                });

                return;
            }

            var userId = this.multipleSelection[0].userId;
            window.location.href = '/sys/user/resetPass?userId=' + userId;
        },
        onDelete: function () {
            if (this.multipleSelection.length == 0) {
                this.$message({
                    type: 'warning',
                    message: '请选择要删除的数据'
                });

                return;
            }

            var $this = this;
            this.$confirm('此操作将永久删除用户数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                callback: function (action, instance) {
                    if (action == 'cancel')
                        return;

                    var userIdList = [];
                    $.each($this.multipleSelection, function (index, item) {
                        userIdList.push(item.userId);
                    });

                    Common.postJson('/sys/user/delete', {userIdList: userIdList},
                        function (response) {
                            if (!response)
                                return;

                            //删除成功
                            if (response.status == 200 && response.result.success) {
                                $this.$message({
                                    type: 'success',
                                    message: '删除成功'
                                });

                                $this.pageNum = 1;
                                $this.loadData();
                            }
                            else {
                                var errMsg = response.status == 200 ? response.result.errMsg : response.msg;

                                $this.$message({
                                    type: 'error',
                                    message: errMsg
                                });
                            }
                        });

                }
            });
        },
        onTreeNodeClick: function (data) {
            if (data.roleId == 0) {
                this.roleId = null;
            } else {
                this.roleId = data.roleId;
            }

            this.userName = '';
            this.loadData();
        }
    }
});